﻿@typeparam TValue
@inherits Blazorise.Select<TValue>
<CascadingValue Value=this>
    <div @ref="@ElementRef" id="@ElementId" class="@ContainerClassNames" style="@StyleNames" disabled="@Disabled" readonly="@ReadOnly" @attributes="@Attributes">
        <div id="@SelectorElementId" class="ant-select-selector" @onclick="@OnSelectorClickHandler">
            @if ( Multiple )
            {
                foreach ( var selectedValue in SelectedValues ?? Enumerable.Empty<TValue>() )
                {
                    var tempValue = selectedValue;

                    <span class="ant-select-selection-item">
                        <span class="ant-select-selection-item-content">@selectedValue</span>
                        <span @onclick="@(_ => OnMultipleValueClickHandler( tempValue ))" class="ant-select-selection-item-remove" unselectable="on" aria-hidden="true" style="user-select: none;">
                            <span role="img" aria-label="close" class="anticon anticon-close">
                                <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
                            </span>
                        </span>
                    </span>
                }
            }
            <div class="ant-select-selection-search">
                <input id="@InputElementId" class="ant-select-selection-search-input" role="combobox" readonly multiple="@Multiple" value="@CurrentValueAsString" aria-haspopup="listbox" aria-owns="@SelectListId" aria-controls="@SelectListId" aria-expanded="@Expanded.ToString().ToLowerInvariant()" />
            </div>
        </div>
    </div>
    <div class="@DropdownClassNames" style="@DropdownStyleNames">
        <div>
            <div class="" style="@DropdownInnerStyleNames">
                <div>
                    <div class="" style="display: flex; flex-direction: column;">
                        @ChildContent
                    </div>
                </div>
            </div>
        </div>
    </div>
</CascadingValue>
@Feedback